<template>
    <div>



        <div class="unified-top-fit">

            <tableMake title="用户信息" icon="el-icon-shopping-bag-1"></tableMake>

            

            <div class="basic unified-bg-white unifined-border-radius unified-add-form">
               
               <el-alert title="用户类型仅仅是为了区分用户,与权限无关" type="warning" :closable="false">
               </el-alert>
               
                <basic style="margin-top: 20px;">

                    <div slot="select">

                        <el-select v-model="addForm.type" placeholder="请选择用户类型">
                            <el-option v-for="item in userType" :key="item._id" :label="item.type" :value="item._id">
                            </el-option>
                        </el-select>

                    </div>

                    <div slot="username">
                        <el-input v-model="addForm.username" placeholder="请输入用户名"></el-input>
                    </div>

                    <div slot="nickname">
                        <el-input v-model="addForm.nickname" placeholder="请输入昵称"></el-input>
                    </div>

                    <div slot="password">
                        <el-input v-model="addForm.password" placeholder="请输入密码"></el-input>
                    </div>

                    <div slot="sex">

                        <el-radio-group v-model="addForm.gender">
                            <el-radio v-for="(item,index) in userGender" :key="index" :label="index">{{item}}</el-radio>
                        </el-radio-group>

                    </div>


                </basic>
            </div>

            <tableMake title="角色配置" icon="el-icon-shopping-bag-1"></tableMake>

            <div class="roles unified-bg-white unifined-border-radius unified-add-form">
                <roles>

                    <div slot="roles">
                        <el-checkbox-group v-model="addForm.role">
                            <el-checkbox v-for="item in userRoles" :key="item._id" :label="item._id">{{item.role_name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>


                </roles>
            </div>


            <tableMake title="状态/备注" icon="el-icon-shopping-bag-1"></tableMake>

            <div class="surplus unified-bg-white unifined-border-radius unified-add-form">

                <surplus>

                    <div slot="comment">
                        <el-input type="textarea" v-model="addForm.comment"></el-input>
                    </div>

                    <div slot="status">
                        <el-select v-model="addForm.status" placeholder="请选择用户状态">
                            <el-option v-for="(item,index) in userStatus" :key="index" :label="item" :value="index">
                            </el-option>
                        </el-select>
                    </div>


                </surplus>

            </div>

            <tableMake title="保存" icon="el-icon-shopping-bag-1"></tableMake>

            <div
                class="release flex unified-flex-center unified-flex-align  unified-bg-white unifined-border-radius unified-add-form">

                <el-button>重置</el-button>
                <el-button @click="sumbit">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    // 引入用户基础信息
    import basic from './compotents/user/basic.vue'
    // 引入角色配置
    import roles from './compotents/user/roles.vue'
    // 引入状态/备注
    import surplus from './compotents/user/surplus.vue'
    // 引入发布
    // import release from './compotents/user/release.vue'


    export default {
        components: {
            basic,
            roles,
            surplus,
            // release,
        },
        computed: {
            ...(mapState(['userStatus', 'userGender']))
        },
        data() {
            return {
                // 用户类型
                userType: [],
                // 角色
                userRoles: [],
                // 表单数据
                addForm: {
                    username: '', // 用户名
                    nickname: '', // 昵称
                    password: '', // 密码
                    gender: 0, // 性别
                    type: "621dbd8c998ca500019c74fd", // 用户类型
                    role: [], // 角色
                    comment: "", // 备注
                    SuperAdmin: false, // 是否为超级管理员
                    status: 0 // 状态
                }
            }
        },

        methods: {

            // 提交表单
            sumbit() {

                this.$axios({
                    url: this.$api.user,
                    method: "POST",
                    data: {
                        "action": "register",
                        "params": {
                            ...this.form
                        }
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        this.$message.success(res.data.msg)
                    } else {
                        this.$message.error(res.data.msg)
                    }


                }).catch(err => {
                    console.log(err);
                })
            },
            back() {

                this.$router.back()
            }

        },
        created() {


            // 获取所有账户类型			
            this.$axios({
                url: this.$api.user,
                method: "GET",
                params: {
                    "action": "userType",
                    "params": {

                    }
                }
            }).then(res => {
                if (res.data.code == 0) {
                    this.userType = res.data.data

                    return this.$axios({
                        url: this.$api.user,
                        method: "GET",
                        params: {
                            "action": "roles",
                            "params": {

                            }
                        }
                    })

                }
            }).then(res => {
                if (res.data.code == 0) {
                    this.userRoles = res.data.data
                }
            })


        }

    }
</script>

<style>
    * /deep/ .el-select {
        width: 100%;
    }
</style>
